<template>
  <div>
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="54px">
      <x-header class="my-header">病患管理</x-header>
      <patient_detail v-for="item in patients"  :patient_data="item"></patient_detail>
      <divider v-if="nodata">您尚未添加病患信息</divider>
      <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="addPatient()" style="width: 90%;margin-top: 30px">添加病患</x-button>
    </view-box>
  </div>
</template>

<script>
  import { Divider,XButton,XHeader, Actionsheet, TransferDom, ButtonTab, ButtonTabItem,ViewBox } from 'vux'
  import { FormPreview } from 'vux'
  import { Group } from 'vux'
  import patient_detail from './patient_detail.vue'
  export default {
    directives: {
      TransferDom
    },
    mounted(){
      this.Ajax("get","/javaapi/patients",{},(res)=>{
        console.log(res);
        this.patients=res;
        if(res.length==0){
          this.nodata=true
        }
      })
    },
    methods:{
      addPatient(){
        this.$router.push({
          path:'/add_patient',
        })
      }
    },
    components: {
      XHeader,Divider,
      Actionsheet,
      ButtonTab,
      ButtonTabItem,
      XButton,
      Group,
      ViewBox,
      patient_detail
    },
    data () {
      return {
        patients:[],
        nodata:false
      }
    }
  }
</script>

<style scoped="">
  .my-header {
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgb(255, 104, 140)
  }


</style>
